<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态组件</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
   <component :is="'text-component'"></component>
  </div>

</body>

<!--
  动态组件
  参数可以是 已注册组件的名字，或 一个组件的选项对象
-->

<script type="text/javascript">
  Vue.config.productionTip = false;

  Vue.component("button-component", {
    data: function () {
      return { count: 0 }
    },
    template: '<div><h1>{{count}}</h1><button @click="count++">我是动态组件1</button></div>',
  })

  Vue.component("text-component", {
    data: function () {
      return { count: 0 }
    },
    template: '<div><h1>{{count}}</h1><button @click="count++">我是动态组件2</button></div>',
  })

  new Vue({
    el: '#root',
    data: {

    },
    methods: {}
  })
</script>

</html>